<template lang="pug">
data-page(
  v-bind="pageParams"
)
  mt-table(
    v-bind="tableProps"
  )
  sampleTrajectory(v-model="trajectoryShow" :selectionRow="specimenRow")
</template>

<script setup lang="ts">
import {
  type FormItemProps,
  type IAction,
  type DataPageProps,
  type TableProps,
} from "@scmt/common-components";
import { useRequest } from "@scmt/common-hooks";
import { useApi } from "@scmt/core-api";
import {
  type SpecimenEntity,
  type SpecimenQueryParams,
} from "@scmt/api-lis-specimen";
import sampleTrajectory from "../../components/sampleTrajectory.vue";
import { specimenColumns, ESpeimenTableColumnKey } from "@scmt/api-common";

const $api = useApi();
const queryPramas = reactive<SpecimenQueryParams>({
  outward: 0,
  isInspection: 5,
  sendInspectionStartDate: "",
  sendInspectionEndDate: "",
  get _tempDate() {
    return [this.sendInspectionStartDate, this.sendInspectionEndDate];
  },
  set _tempDate(val) {
    [this.sendInspectionStartDate, this.sendInspectionEndDate] = val || [
      "",
      "",
    ];
  },
  pageNum: 1,
  pageSize: 20,
});
const trajectoryShow = ref(false);
const specimenRow = ref({});

const selectionRow = ref([]);
import { useUtils } from "@scmt/lib-utils";
import { useGroup } from "../../composable/group";
const { request, data, loadingMap } = useRequest(
  {
    tableData: (q: any) => {
      const { _tempDate, ...params } = Object.assign({}, queryPramas, q);
      return $api.lis.specimen.getSpecimenPageList(params);
    },
  },
  {
    tableData: {
      pagination: {
        total: 0,
        pageNum: queryPramas.pageNum,
        pageSize: queryPramas.pageSize,
      },
      items: [] as SpecimenEntity[],
    },
  }
);

const { getCellClassName, spanMethod } = useGroup(toRef(data, "tableData"));

const pageParams = computed<DataPageProps>(() => {
  const queryFields: FormItemProps[] = [
    {
      prop: "outpatientNumber",
      label: "业务编号",
    },
    {
      prop: "patientName",
      label: "患者姓名",
    },
    {
      prop: "barcode",
      label: "标本条码",
    },
    {
      prop: "source",
      label: "业务来源",
      as: "select",
      options: {
        loadMethod: () => $api.dict.item.listAsOptions("patient-type"),
      },
    },
    {
      prop: "billingDepartment",
      label: "开单科室",
      as: "select",
      options: {
        render: "office-table",
        loadMethod: $api.upms.org.listAsOptions,
      },
    },
    {
      prop: "specimenTypeId",
      label: "标本类型",
      as: "select",
      options: {
        filterable: true,
        loadMethod: () => {
          return $api.lis.specimen.category.listAsOptions();
        },
      },
    },
    {
      prop: "_tempDate",
      label: "送检时间",
      as: "date",
      span: 6,
      options: {
        type: "daterange",
      },
    },
  ];

  const dataPageProps: DataPageProps = {
    loading: loadingMap.tableData,
    queryModel: queryPramas,
    queryFields,
    onQuery: getData,
    onAct: onPageActions,
    columns: 6,
    flex: true,
  };

  return dataPageProps;
});

const tableProps = computed(() => {
  const { tableData } = toRefs(data);

  const tableProps: TableProps = {
    loading: loadingMap.tableData,
    data: tableData.value?.items,
    pagination: tableData.value?.pagination,
    columns: [
      {
        prop: "batchNumber",
        label: "批次号",
        width: 170,
      },
      specimenColumns[ESpeimenTableColumnKey.Source],
      specimenColumns[ESpeimenTableColumnKey.OutpatientNumber],
      specimenColumns[ESpeimenTableColumnKey.PatientName],
      specimenColumns[ESpeimenTableColumnKey.Sex],
      specimenColumns[ESpeimenTableColumnKey.Age],
      specimenColumns[ESpeimenTableColumnKey.ApplicationProject],
      specimenColumns[ESpeimenTableColumnKey.SpecimenTypeId],
      specimenColumns[ESpeimenTableColumnKey.Barcode],
      specimenColumns[ESpeimenTableColumnKey.State],
      specimenColumns[ESpeimenTableColumnKey.BillingDepartment],
      specimenColumns[ESpeimenTableColumnKey.BillingDoctor],
      specimenColumns[ESpeimenTableColumnKey.BillingTime],

      {
        prop: "collectionTime",
        label: "采集时间",
        format: "datetime",
      },
      {
        prop: "collectionName",
        label: "采集人",
        tooltip: true,
      },
      specimenColumns[ESpeimenTableColumnKey.Urgent],
      {
        prop: "_operation",
        label: "操作",
        fixed: "right",
        actions: [
          {
            label: "标本轨迹",
            event: "check",
            type: "primary",
          },
        ],
      },
    ],
    onAct: onPageActions,
    onPaginate: getData,
    onSelectionChange: (selection: any) => {
      selectionRow.value = selection;
    },
    highlightCurrentRow: true,
    cellClassName: getCellClassName,
    spanMethod,
  };
  return tableProps;
});

const onPageActions = (action: IAction, model?: any) => {
  switch (action.event) {
    case "check":
      specimenRow.value = {};
      specimenRow.value = model;
      trajectoryShow.value = true;
      break;
  }
};
//监听设备选择改变
watch(
  () => queryPramas.outpatientNumber,
  () => {
    getData();
  },
  {
    immediate: true,
  }
);

function getData(q?: any) {
  request("tableData", q);
}
</script>

<style lang="less" scoped>
@text-size: calc(var(--unit) * 20);

:deep(.el-table) {
  &__body {
    .group-text {
      position: relative;

      &::before {
        position: absolute;
        display: inline-block;
        color: var(--el-color-primary);
        font-size: var(--mt-fs-mini);
        top: 50%;
        transform: translate(-50%, -50%);
        content: "合";
        font-weight: 700;
        width: @text-size;
        height: @text-size;
        text-align: center;
        line-height: @text-size;
        border-radius: 50%;
        background-color: var(--el-color-white);
        z-index: 1;
      }
    }

    .group-text--offset {
      position: relative;
      &::before {
        top: -50%;
        transform: translate(-50%, 50%);
      }
    }
  }
}
</style>
